// 1 在页面把静态的页面写出来  OK
		
// 2 向后端发送请求 拿到返回json格式的数据

window.onload=function(){
	
	//页面加载完毕就干活  往后端发请求
	
	//var begin=1;
	
	var vue= new Vue({
		el:'#studentList',
		data:{
			studentList:{},
			checkData:[],
			begin:1,
			counter:0,
			pageSize:3,
			totalPage:0,
		},
		
		watch: {
			checkData: { 
				// 监视双向绑定的数组变化
				handler(){
					if(this.checkData.length == this.studentList.length){
						document.querySelector('#quan').checked = true;
					}else {
						document.querySelector('#quan').checked = false;
					}
				},
				deep: true
			}
		},
				
		methods:{
			//发ajax请求都方法 ....
			
			get:function(currentPage){
			
				var url='http://localhost:8080/attendance-service/class/find.do?method=page&currentPage='+currentPage+'&pageSize=3';
				this.$http.get(url).then(function(backdatas){
					//1 给vue对象的data属性赋值
					console.log(backdatas);
					
					var code =backdatas.body.code;
					console.log(code);
					
					// 拿到后台返回的数据
					var dataR=backdatas.body.data.delayList;
					
					vue.counter=backdatas.body.data.counter;
					
					var totalPage;
					if(vue.counter%vue.pageSize==0){
						totalPage= parseInt(vue.counter/vue.pageSize)
					}else{
						totalPage=  parseInt(vue.counter/vue.pageSize)+1;
					}
					
					vue.totalPage=totalPage;
					// 把 dataR 给 data的studentList属性
					vue.studentList=dataR;
					console.log("success...")
					
				});
			},
			
			post:function(){
				
				// 1 用vue拿到ids =[32,36,37] 
				var ids=vue.checkData;
				
				var url='http://localhost:8080/attendance-service/class/find.do?method=delete';
				
				//var fdata={"ids":ids};
				this.$http.post(url,{ids:ids},{emulateJSON:false}).then(function(backdatas){
					
					console.log(backdatas);
					
				});
				
			},
			
			
			//上1页
			prePage:function(){
				
				//如果已经知道当前页是第1页
				//var currentPage=1;
				
				if(vue.begin>=2){
					
					//设置1个新的值
					vue.begin=vue.begin-1;
					vue.get(vue.begin);
				}
				
			},
			//下1页
			nextPage:function(){
				
				
				//如果已经知道当前页是第1页
				//var currentPage=1;
				
				
				if(vue.begin<=vue.totalPage-1){
					vue.begin=vue.begin+1;
					vue.get(vue.begin);
				}
				
				
			},
			
			// 给按钮绑定1个事件
			deteleData:function(){
				
				//调用post方法 删除数据?
				vue.post();
				
				//刷新页面
				location.reload();
				
			},
			selectAll:function(e){ // 点击全选事件函数
				var checkObj = document.querySelectorAll('.checkItem'); // 获取所有checkbox项
				if(e.target.checked){ // 判定全选checkbox的勾选状态
					for(var i=0;i<checkObj.length;i++){
						if(!checkObj[i].checked){
							// 将未勾选的checkbox选项push到绑定数组中
							
							var abc=parseInt(checkObj[i].value);
							this.checkData.push(abc);
						}
					}
				}else { // 如果是去掉全选则清空checkbox选项绑定数组
					this.checkData = [];
				}
			},
		}
	});
	
	// 调用这个方法
	 vue.get(1);
	
}